<template>
  <div class="editable-cell">
    <a-popover
      v-model="visible"
      :title="title"
      trigger="click"
      placement="top"
      :destroyTooltipOnHide="true"
    >
      <template slot="content">
        <div class="popoverStyle">
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="form.rules"
            layout="inline"
            :style="{ width: '100%' }"
          >
            <a-form-model-item
              class="inline-item"
              :style="{ width: '180px' }"
              prop="checkName"
            >
              <a-tooltip placement="topLeft">
                <template #title>
                  <span> {{ $t('exportPdf.inputTip2') }} </span>
                </template>

                <a-input v-model="form.checkName" />
              </a-tooltip>
            </a-form-model-item>
            <a-form-model-item
              class="inline-item"
              :style="{ width: '180px' }"
              prop="checkPass"
            >
              <a-tooltip placement="topLeft">
                <template #title>
                  <span> {{ $t('exportPdf.inputTip2') }} </span>
                </template>

                <a-input v-model="form.checkPass" />
              </a-tooltip>
            </a-form-model-item>
          </a-form-model>

          <rj-space :style="{ lineHeight: '40px' }">
            <a-button type="primary" @click="saveEditCell">{{
              $t('exportPdf.change')
            }}</a-button>
            <a-button @click="cancelEditCell">{{
              $t('exportPdf.cancel')
            }}</a-button>
          </rj-space>
        </div>
      </template>
      <a @click="showEditTableCell" :class="[!isAll ? 'user-name-bottom' : '']">
        <template v-if="isAll">{{ $t('exportPdf.batchEnter') }}</template>
        <template v-else>
          {{ !!name || !!pass ? `${name}/${pass}` : $t('exportPdf.clickAdd') }}
        </template>
      </a>
    </a-popover>
  </div>
</template>

<script>
import { i18nRender } from '@/locales';
export default {
  data() {
    let validateNamePass = function (rule, value, callback) {
      if (value.indexOf('/') != -1) {
        return callback(new Error(i18nRender('exportPdf.tips2')));
      }
      if (/[\u4E00-\u9FA5?]/.test(value)) {
        return callback(new Error(i18nRender('exportPdf.tips3')));
      }
      if (value.length > 64) {
        return callback(new Error(i18nRender('exportPdf.maxLength64')));
      }
      callback();
    };
    return {
      visible: false,
      form: {
        checkName: this.name || '',
        checkPass: this.pass || '',
        rules: {
          checkName: [
            {
              validator: validateNamePass,

              trigger: 'blur',
            },
          ],
          checkPass: [
            {
              validator: validateNamePass,

              trigger: 'blur',
            },
          ],
        },
      },
    };
  },
  props: {
    title: {
      type: String,
      default: i18nRender('exportPdf.setting'),
    },
    placeholder: {
      type: String,
      default: '',
    },
    record: {
      type: Object,
      require: true,
    },
    checkRules: {
      type: Array,
      default: () => [],
    },
    name: {
      type: [String, Number],
      default: '',
    },
    pass: {
      type: [String, Number],
      default: '',
    },
    isAll: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    showEditTableCell() {
      this.visible = true;
    },

    saveEditCell() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('change', this.form);
          this.visible = false;
        }
      });
    },
    cancelEditCell() {
      this.visible = false;
      this.resetData();
    },

    resetData() {
      this.form.checkName = this.name || '';
      this.form.checkPass = this.pass || '';
    },
  },
  watch: {
    name(val) {
      this.form.checkName = val;
    },
    pass(val) {
      this.form.checkPass = val;
    },
  },
};
</script>

<style lang="less" scoped>
.popoverStyle {
  min-width: 350px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.user-name-bottom {
  text-decoration: none;
  border-bottom: 1px dashed #1da57a;
  word-break: break-all;
}
</style>
